<template>
  <el-dialog
    title="跟单列表"
    v-model="dialogVisible"
    width="1200px"
    :before-close="handleClose"
    class="customer-list-dialog"
    @close="handleClose"
    append-to-body
  >
    <div class="filter-section">
      <el-input v-model="queryParams.supplierName" style="max-width: 240px" placeholder="请输入客户名称" class="input-with-select" clearable>
        <template #append>
          <el-button @click="handleQuery" type="primary"
            ><el-icon><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </div>

    <div class="mt20 content">
      <div v-show="tableHeight && showTree" :style="`height: ${tableHeight}px;position: relative;border-radius:12px`">
        <div class="left" :style="`height: ${tableHeight}px;`">
          <div class="left-top">
            <div class="">跟单类型</div>
            <div class="">
              <img style="width: 30px; height: 30px" @click="handleEdge" :src="showTree ? imgs[1] : imgs[0]" />
            </div>
          </div>
          <el-tree
            ref="classifyTreeRef"
            class="mt-2"
            node-key="id"
            :data="followTypeList"
            :props="{ label: 'typeName', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            highlight-current
            default-expand-all
            @node-click="itemClick"
          />
          <div class="buttons">
            <div class="button" @click="handleAddClassify">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <div>新增分类</div>
            </div>
            <div class="button" @click="handleEditClassify">
              <el-icon>
                <Edit />
              </el-icon>
              <div>编辑分类</div>
            </div>
            <div class="button" @click="handleDelClassify">
              <el-icon>
                <Delete />
              </el-icon>
              <div>删除分类</div>
            </div>
          </div>
        </div>
      </div>
      <el-card shadow="always" ref="table" :body-style="{ padding: '20px' }" :class="{ 'w-tree': showTree, 'w-all': !showTree }">
        <el-table
          :height="'calc(100vh - 422px)'"
          size="large"
          scrollbar-always-on="true"
          border
          v-loading="loading"
          :data="dataSource"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
          ref="tableRef"
        >
          <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="clueNumber" label="跟单号" width="180">
            <template #default="scope">
              <div style="color: #409eff; cursor: pointer" @click="handleView(scope.row, scope.$index)">{{ scope.row.clueNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="followDate" label="跟单日期" width="120">
            <template #default="scope">
              {{ moment(scope.row.followDate).format('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column prop="clueName" label="项目名称" width="180" />
          <el-table-column prop="estimatedTransactionAmount" label="预计成交金额" width="120" />
          <el-table-column prop="estimatedBuyDate" label="预计成交时间" width="180" />
          <el-table-column prop="supplierName" label="客户名称" width="100" />
          <el-table-column prop="sourceName" label="跟单来源" width="100" />
          <el-table-column prop="country" label="所属区域" width="100" />
          <el-table-column prop="followUserName" label="跟单人" width="80" />
          <el-table-column prop="createByName" label="报备人" width="80" />

          <!-- <el-table-column label="跟单状态" align="left" prop="clueStatus" width="110">
            <template #default="scope">
              <el-tag :type="scope.row.clueStatus == 1 ? 'success' : 'danger'">
                {{ scope.row.clueStatus == 1 ? '已分配' : '未分配' }}
              </el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="跟单进度" prop="followStageName" fixed="right" width="120">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.followStageName">
                {{ row.followStageName }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page.sync="queryParams.pageNum"
          v-model:limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
      <div class="fixed-icon" @click="handleEdge" v-show="!showTree">
        <el-icon>
          <DArrowRight />
        </el-icon>
      </div>

      <transer ref="transer" @ok="getList"></transer>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
    
    <script>
import listMixin from '@/mixins/listMixin';
import zk from '@/assets/images/zhankai.svg';
import zd from '@/assets/images/zhedie.svg';
import transer from '@/views/goods/clue/modules/transer.vue';
import { listFollowType } from '@/api/goods/followType';
import moment from 'moment';
export default {
  name: 'CustomerListModal',
  mixins: [listMixin],
  components: {
    transer
  },
  data() {
    return {
      urls: {
        list: '/order/clue/list',
        delete: '/order/clue'
      },
      dialogVisible: false,
      imgs: [zk, zd],
      customerName: '',
      manager: '',
      currentPage: 1,
      total: 1,
      customerOptions: [],
      managerOptions: [],
      showTree: true,
      tableHeight: 0,
      tableData: [
        {
          name: '示例客户',
          phase: '初始阶段',
          manager: '张经理'
        }
      ]
    };
  },
  methods: {
    moment,
    handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit('close');
    },
    open() {
      this.dialogVisible = true;
    this.listFollowType();
      this.$nextTick(() => {
        setTimeout(() => {
          this.tableHeight = this.$refs.table.$el.scrollHeight;
        }, 200);
      });
          },
    
    // 获取跟单类型
    listFollowType() {
      listFollowType({
        pageSize: 9999,
        pageNum: 1,
        typeCategory:1
      })
        .then((res) => {
          let arr = (res.rows || []).map((v) => ((v.children = []), v));
          this.followTypeList = [
            {
              id: '',
              typeName: '全部',
              children: arr
            }
          ];
        })
        .catch((err) => {
          console.log(err);
        });
          },
    
          itemClick(item, index) {
      this.currentItem = item;
      this.queryParams.followTypeId = item.id;
      this.getList();
    },
    handleConfirm() {
      if (this.selectedRows.length === 0) return this.$modal.msgError('请选择跟单');
      if (this.selectedRows.length > 1) return this.$modal.msgError('只能选择一条记录');
      this.$emit('ok', this.selectedRows);
      this.handleClose();
    },
    handleCreate() {
      // Handle create new customer logic
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    handleAddClassify() {
      this.$refs.transer.add({});
    },
    handleEditClassify() {
      console.log(this.currentItem, 'this.currentItem');
      if (!this.currentItem || !this.currentItem.id) {
        this.$message.warning('请选择类型');
        return;
      }
      this.$refs.addFormType.edit(this.currentItem);
    },
        rowClick(row, column, event) {
      this.$refs.tableRef.clearSelection()
      this.$refs.tableRef.toggleRowSelection(row);

      this.selectedRows = [row];
        },
    handleDelClassify() {
      if (!this.currentItem) {
        this.$message.warning('请选择类型');
        return;
      }
      this.$modal
        .confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          console.log('666 :>> ', 666);
          request({
            url: '/order/followType/' + this.currentItem.id,
            method: 'delete'
          }).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess('删除成功');
              this.currentItem = {};
              this.listFollowType();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.customer-list-dialog {
  /* Add any custom styles here */
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.text-right {
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-select {
  width: 100%;
}

/* Override element-plus styles if needed */
:deep(.el-dialog__body) {
  padding: 20px;
}
.left {
  width: 240px;
  border: 1px solid #e6ebf5;
  // position: relative;
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 60px;
  background-color: #fff;

  .fodder_list {
    z-index: 20;

    .fodder_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      cursor: pointer;

      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        svg {
          margin-right: 10px;
        }

        .fodder_name {
          font-size: 14px;
          color: #303133;
          width: 84px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .fodder_item.active,
    .fodder_item:hover {
      background-color: #f5f5f5;
    }
  }

  .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: absolute;
    bottom: 1px;
    width: 238px;
    border-top: 1px solid #e6ebf5;
    background-color: #fff;
    z-index: 21;
    font-size: 12px;
    color: #303133;

    .button {
      cursor: pointer;
      padding: 10px;
      text-align: center;

      i {
        margin-right: 5px;
      }
    }

    .button:not(:last-child) {
      border-right: 1px solid #e6ebf5;
    }

    .button:hover {
      color: #409eff;
    }
  }
}

.left-top {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  border-bottom: 1px solid #e6ebf5;
  align-items: center;

  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24px;
    color: #303133;
    font-weight: bold;
  }
}
.fixed-icon {
  position: fixed;
  //left: 0;
  top: 400px;
  z-index: 999;
  background-color: #409eff;
  padding: 12px 2px;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.w-tree {
  width: calc(100% - 260px);
}

.w-all {
  width: 100%;
}
</style>